import React, { useState } from 'react';
import { ZoomInOutlined } from "@ant-design/icons";
import "./style.css"
import MyTemplate from './Templateace/MyTemplate';
import RecommendedTemplate from './Templateace/RecommendedTemplate'
const Index:React.FC = () => {
  const [activeTab, setActiveTab] = useState('推荐模板');

  const tabs = ['推荐模板', '我的模板'];
  return (
    <div>
      <div className="topInp">
<ZoomInOutlined /><input type="text" placeholder='一句话描述你想要的模板内容'/>
      </div>
<div className="tabs">
        {tabs.map(tab => (
          <button
          style={{borderBottom:'1px #cccccc00 solid',borderRadius:'0%'}}
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={activeTab === tab ? 'actives' : ''}
          >
            {tab}
          </button>
        ))}
      </div>
      <div className="content">
        {activeTab === '推荐模板' && <div><RecommendedTemplate></RecommendedTemplate></div>}
        {activeTab === '我的模板' && <div><MyTemplate></MyTemplate></div>}
      </div>
    </div>
  )
}

export default Index
